<template>
  <div class="CoordinateContainer" v-drag>
    <div class="CoordinateDialogTitle drag-handle">
      <div class="title-left">
        <div class="bar"></div>
        <div class="title-text">多坐标定位</div>
      </div>
      <div class="title-right">
        <div tabindex="0" class="icon" @click="closeDialog">×</div>
      </div>
    </div>
    <div class="CoordinateDialogContent">
      <!-- <div class="search-box">
                <label for="x-coordinate">X:</label>
                <input
                    type="text"
                    id="x-coordinate"
                    class="search-input"
                    placeholder="请输入X值"
                    v-model="CoordinateX"
                />
            </div> -->
      <div class="search-box">
        <!-- <label class="yLabel" for="y-coordinate">坐标:</label> -->
        <el-input
          type="textarea"
          :rows="2"
          id="y-coordinate"
          class="search-input"
          placeholder="请输入多个坐标值,横纵坐标用逗号分隔,多个坐标用分号分隔"
          v-model="CoordinateXY"
        >
        </el-input>
      </div>
      <div class="search-button">
        <el-button type="primary" @click="CoordinateToCenter">复位</el-button>
        <el-button type="primary" @click="CoordinateToPosition">定位</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      CoordinateXY: "",
      CoordinateXY1: [],
      CoordinateLayer: null,
      map: null,
    };
  },
  methods: {
    initMap() {
      setTimeout(() => {
        this.map = this.$store.getters.Map;
        if (this.map) {
        } else {
          console.error("坐标定位地图实例未找到");
        }
      }, 1000); // 延迟 1000 毫秒（1秒）后执行
    },
    createLayer() {
      setTimeout(() => {
        this.CoordinateLayer =
          this.map.layer.createVectorLayer("CoordinateLayer");
      }, 1000); // 延迟 1000 毫秒（1秒）后执行
    },
    closeDialog() {
      // 通过修改 prop 来关闭弹窗
      this.$emit("update:dialogVisible", false);
    },
    CoordinateToPosition() {
      this.CoordinateLayer.getSource().clear();
      const parts = this.CoordinateXY.split(";");
      for (let i = 0; i < parts.length; i++) {
        // 将按分号分隔的字符串再按逗号分隔
        let point = parts[i].split(",");
        // 一个点的x值
        let x = point[0];
        // 一个点的y值
        let y = point[1];
        if (i == parts.length - 1) {
          this.CoordinateXY1 = point;
          this.map.panTo(this.CoordinateXY1, 12);
        }
        this.addMarker([x, y]);
      }
    },
    CoordinateToCenter() {
      this.clearAllLayer();
      this.map.panTo([314497.81, 655844.5], 13);
    },
    addMarker(item) {
      this.map.marker.addMarker(
        item[0] || item.center[0],
        item[1] || item.center[1],
        this.CoordinateLayer,
        {
          imgUrl: require("@/assets/bookMarker.png"),
          scale: 0.5, //大小
          radius: 1,
          pBorderColor: "#000000",
          pBorderWidth: 1,
          pFillColor: "",
        },
        item
      );
    },
    clearAllLayer() {
      this.CoordinateLayer.getSource().clear();
    },
  },
  computed: {
    isCoordinateShow() {
      return this.dialogVisible;
    },
  },
  mounted() {
    this.initMap();
    this.createLayer();
  },
  destroyed() {
    if (this.map) {
      this.CoordinateLayer.getSource().clear();
      this.map.map.removeLayer(this.CoordinateLayer);
      this.map = null;
    }
  },
};
</script>

<style lang="scss" scoped>
.CoordinateContainer {
  width: 15vw;
  color: white;
  position: absolute;
  top: 5vh;
  right: -70vw;
  height: 46vh;
  z-index: 2;
  .CoordinateDialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    background-color: #285383;
    .title-left,
    .title-right {
      display: flex;
      align-items: center;
    }
    .bar {
      width: 5px; /* 小竖条的宽度 */
      height: 20px; /* 小竖条的高度 */
      background-color: white; /* 小竖条的颜色 */
      margin-right: 10px; /* 小竖条和文字之间的间距 */
    }
    .icon {
      width: 20px; /* 小方框的宽度 */
      height: 20px; /* 小方框的高度 */
      // border: 1px solid #4998f2; /* 小方框的边框 */
      margin-left: 5px; /* 小方框之间的间距 */
    }
    .icon:hover {
      color: #4998f2;
    }
    .icon:focus {
      color: #4998f2;
    }
  }
  .CoordinateDialogContent {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #285383;
    font-size: 0.8rem;
  }
  .search-box {
    display: flex; // 启用 flex 布局
    flex-direction: row; // 子元素水平排列
    width: 98%; /* 使两个搜索框并列显示，中间有一定的间隔 */
    line-height: 2rem;
    label {
      margin-left: 10px;
    }
  }
  .search-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search-input {
    width: 100%; /* 使输入框填满其父容器的宽度 */
    margin-top: 4px;
    margin-bottom: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}

label {
  display: block;
  margin-bottom: 4px;
}
</style>
